﻿@page "/query-builder/default-functionalities"

@using Syncfusion.Blazor.QueryBuilder
@using BlazorDemos
@using blazor_griddata

@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the default functionalities of the QueryBuilder component. Click the plus button to add a group or conditions.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>QueryBuilder</code> component is used to create or edit filters. You can edit filters by changing the fields.</p>
   <p>In mobile mode, the component is shown vertically.</p>
   <p>More information about Blazor QueryBuilder component can be found in this <a target=""_blank"" href="https://blazor.syncfusion.com/documentation/query-builder/getting-started/">documentation section</a>.</p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <SfQueryBuilder DataSource="@dataSource">
        <QueryBuilderRule Condition="and" Rules="@rules"></QueryBuilderRule>
        <QueryBuilderColumns>
            <QueryBuilderColumn Field="CustomerID" Label="CustomerID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.Number></QueryBuilderColumn>
            <QueryBuilderColumn Field="EmployeeID" Label="EmployeeID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String></QueryBuilderColumn>
            <QueryBuilderColumn Field="Verified" Label="Verified" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.Boolean Values=@values></QueryBuilderColumn>
            <QueryBuilderColumn Field="ShipName" Label="ShipName" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String></QueryBuilderColumn>
            <QueryBuilderColumn Field="OrderDate" Label="OrderDate" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.Date Format="dd/MM/yyyy"></QueryBuilderColumn>
            <QueryBuilderColumn Field="ShipCountry" Label="ShipCountry" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String></QueryBuilderColumn>
            <QueryBuilderColumn Field="ShipAddress" Label="ShipAddress" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String></QueryBuilderColumn>
        </QueryBuilderColumns>
    </SfQueryBuilder>
</div>

@code{

    private List<RuleModel> rules = new List<RuleModel>()
    {
         new RuleModel { Label="CustomerID", Field="CustomerID", Type="Number", Operator="equal", Value = 1001 },
         new RuleModel { Label="EmployeeID", Field="EmployeeID", Type="String", Operator="equal", Value = "FLKIN" }
    };
 
    private List<string> values = new List<string> { "True", "False" };
    private List<Orders> dataSource { get; set; }
    protected override void OnInitialized()
    {
        dataSource = Orders.GetAllRecords();
    }
}

<style>

    .e-query-builder {
        margin: 0 auto;
    }
</style>
